﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <script src="~/package/dist/echarts.js"></script>

    <style type="text/css">
        .sales {
            color: blue;
            font-size: 30px;
            font-family: "宋体";
            text-align: center;
        }

        #main {
            width: 600px;
            height: 400px;
            position: absolute;
            top: 25%;
            left: 50%;
            margin-top: -100px;
            margin-left: -300px;
        }
    </style>
    <title>商品销量记录统计</title>
</head>
<body>
    @* <div class="sales"><p>商品销售记录统计</p></div>*@

    @*定义统计盒子*@
    <div id="main"></div>

    <script src="~/js/jquery-3.4.1.js"></script>
    <script>


        var myChart = echarts.init(document.getElementById('main'));


        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var nums = [];    //销量数组（实际用来盛放Y坐标值）

        $.ajax({
            type: "get",
            url: "http://localhost:31861/api/SalesrRecord/GetSalesrRecord",    //请求发送到TestServlet处
            success: function (res) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (res.isSuccess) {
                    for (var i = 0; i < res.datas.length; i++) {
                        names.push(res.datas[i].commodityName);    //挨个取出类别并填入类别数组
                    }
                    for (var i = 0; i < res.datas.length; i++) {
                        nums.push(res.datas[i].sum);    //挨个取出销量并填入销量数组
                    }

                    // 显示标题，图例和空的坐标轴
                    myChart.setOption({
                        title: {
                            text: '商品销量前十统计'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            //data: ['w', 's']
                            data: names
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            //data: ['12', '2']
                            data: nums
                        }]
                    });

                } else {
                    alert("失败");
                }

            }
        })

    </script>

</body>

</html>